<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title id="detailTitle">阿里头条</title>
    <meta name="keywords" content="阿里头条"/>
    <meta name="description" content="今天，来自全球各地的数万名阿里巴巴集团员工齐聚杭州黄龙体育中心，以一场史无前例的年会共迎阿里集团18周年。"/>
    <link href="main.css" rel="stylesheet"/>
</head>
<body>
<div id="loading">
    <div class="loader-inner pacman">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<div id="page" class="hidden">
    <div id="part1" style="background-image: url(bg.jpg)">
        <div class="germytopnews" style="padding-top:120%;">
            <p><input class="inputname" placeholder="请输入姓名" maxlength="10"/></p>
            <button class="germytopnews-button j_getName">生成我的阿里头条</button>
        </div>
    </div>
    <div id="part2" class="hidden">
        <div class="top">
            <img src="top.png" width="100%"/>
        </div>
        <a href="#" class="right-btn reset-link">
            <img src="right-btn.png" width="100%"/>
        </a>
        <div class="content">
            <h2 class="j_title">阿里巴巴成立18周年，马云最想感谢的人竟然是<span class="xx">XX</span></h2>
            <p class="sub" data-txt="102 评论">阿里巴巴集团 <span>09-08 18:18</span></p>
            <div class="content-main">
                <p>
                    <img src="banner.png" width="100%"/>
                </p>
                <p>
                    今天，来自全球各地的数万名阿里巴巴集团员工齐聚杭州黄龙体育中心，以一场史无前例的年会共迎阿里集团18周年。
                </p>
                <p>
                    紧邻马云身边坐的既不是商界大佬也不是耀眼明星，而是18年前就开始默默资助马云及阿里巴巴创业团队的剁手党代表<span class="xx">XX</span>。据悉，<span class="xx">XX</span>近年来过着十分低调的生活，甚至连周围亲友都不知道<span
                        class="xx">XX</span>竟是阿里巴巴幕后投资人。
                </p>
                <p>
                    年会当天，神秘投资人<span class="xx">XX</span>的生活现状也首度公之于众。<span class="xx">XX</span>不仅是淘气值早已过千的资深淘宝天猫剁手党，还起早贪黑坚持偷能量，在蚂蚁森林种下了好几棵树，每周与<span
                        class="xx">XX</span>见面频次最高的人，当属可爱的快递小哥哥们；度假上飞猪、出门用高德、吃饭找盒马，看电影前不说“买票”，非得要说“淘票票”……<span
                        class="xx">XX</span>对自己的生活状态十分满意。
                </p>
                <p>
                    现场，马云携阿里巴巴全体合伙人、6万名员工集体致谢<span class="xx">XX</span>：“当初没有你，就不会有今天的阿里巴巴！”而<span class="xx">XX</span>也十分动容，表示18年前义无反顾支持一无所有的马云，完全是因为两个字——看脸！
                </p>
                <div class="main-footer">
                    <img src="floor-empty.png" width="100%"/>
                    <div class="gen-button">
                        <button class="germytopnews-button reset-link">生成我的阿里头条</button>
                    </div>
                </div>
            </div>
            <div class="fixed-bottom">
                <a href="#" class="reset-link">
                    <img src="fixed-bottom.png" width="100%"/>
                </a>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="http://g.alicdn.com/dingding/open-develop/1.6.9/dingtalk.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    var titleArr = [
            "阿里巴巴成立18周年，马云最想感谢的人竟然是<span class='xx'>XX</span>",
            "阿里4万人年会现场，神秘人<span class='xx'>XX</span>紧挨马云身旁坐，羡煞一众大佬、明星",
            "阿里巴巴18周年年会现场，马云当众为<span class='xx'>XX</span>热舞一曲",
            "创业18年来，阿里巴巴合伙人首次集体致谢<span class='xx'>XX</span>：“当初没有你，就不会有今天的阿里巴巴！”",
            "成立18年，阿里巴巴首度曝光神秘幕后高人<span class='xx'>XX</span>现状：十分低调",
            "让马云感激18年的最大投资人<span class='xx'>XX</span>，今现身阿里巴巴年会现场",
            "阿里18周年年会，数万人齐聚杭州，马云坦言最想见的人其还要数<span class='xx'>XX</span>",
            "有人问<span class='xx'>XX</span>，18年前为何选择看好一无所有的马云，答曰：“看脸。”"
        ],
        baseUri = location.protocol + "//www.liaomeapp.com/h5/",
        avtArr = [
            baseUri + "avt/1.jpg",
            baseUri + "avt/2.jpg",
            baseUri + "avt/3.jpg",
            baseUri + "avt/4.jpg",
            baseUri + "avt/5.jpg",
            baseUri + "avt/6.jpg",
            baseUri + "avt/7.jpg",
            baseUri + "avt/8.jpg"
        ];
    var shareValues = {
        url: location.href,
        title: document.title,
        desc: "今天，来自全球各地的数万名阿里巴巴集团员工齐聚杭州黄龙体育中心，以一场史无前例的年会共迎阿里集团18周年。",
        avtIcon: avtArr[0]
    };

    $(function () {

        var reqParams = GetRequest();

        var page = $("#page"),
            part1 = $("#part1"),
            part2 = $("#part2"),
            loading = $("#loading");


        init();

        function init() {
            if (reqParams.vname) {
                changeXX(reqParams.vindex, reqParams.vname);
            } else {
                toPart1()
            }

            $(".j_getName").on("click", function () {
                var name = $(".inputname").val();
                if (name) {
                    changeXX(-1, name);
                }
            });

            $(".reset-link").on("click", function () {
                toPart1();
                return false;
            })

            part1.css("min-height",$(window).height());
        }

        function toPart1() {
            toLoading(function () {
                loading.addClass("hidden")
                part2.addClass("hidden")
                page.removeClass("hidden")
                part1.removeClass("hidden")
            })
        }

        function toPart2() {
            toLoading(function () {
                loading.addClass("hidden")
                page.removeClass("hidden")
                part1.addClass("hidden")
                part2.removeClass("hidden")
            })
        }

        function toLoading(callback) {
            loading.removeClass("hidden")
            page.addClass("hidden")
            callback && setTimeout(callback, 300);
        }

        function changeXX(index, name) {
            if (index < 0 || index === undefined) {
                index = rnd(0, 8)
            }

            var title = titleArr[index || 0] || titleArr[0],
                avtIcon = avtArr[index || 0] || avtArr[0],
                _name = funcName(name, 10);

            checkNamePass(_name,function(){
                $(".j_title").html(title);
                $(".xx").text(_name || "XXX");
                setTitle($(".j_title").text());
                shareValues.avtIcon = avtIcon;
                shareValues.url = shareValues.url.split("?")[0] + "?" + "vname=" + encodeURIComponent(_name) + "&vindex=" + index;
                toPart2();
            },function(){
                alert("你太调皮了哦，换一个吧~");
                console.log("关键词黑名单：",_name);
                $(".inputname").val("");
                toPart1()
            })
        }

        function GetRequest() {
            var url = location.search; //获取url中"?"符后的字串
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                var strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = decodeURIComponent(strs[i].split("=")[1]);
                }
            }
            return theRequest;
        }

        function rnd(start, end) {
            return Math.floor(Math.random() * (end - start) + start);
        }

        function setTitle(title) {
            shareValues.title = title
            document.title = title; // hack在微信等webview中无法修改document.title的情况
            var $iframe = document.createElement('iframe');
            $iframe.src = '/favicon.ico';
            $iframe.style.display = 'none';
            $iframe.onload = () => {
                setTimeout(() => {
                    $iframe.onload = null;
                    document.body.removeChild($iframe);
                }, 0);
            };
            document.body.appendChild($iframe);
            //设置分享===
            setShare();
        }

        function setShare() {
            var ua = navigator.userAgent
            if (ua.indexOf("DingTalk") > -1) {
                dd.ready(function () {
                    try {
                        dd.biz.navigation.setRight({
                            control: true,//是否控制点击事件，true 控制，false 不控制， 默认false
                            text: '分享',//控制显示文本，空字符串表示显示默认文本
                            onSuccess: function (result) {
                                dd.biz.util.share({
                                    type: 0,
                                    url: shareValues.url,
                                    title: shareValues.title,
                                    content: shareValues.desc,
                                    image: shareValues.avtIcon,
                                    onSuccess: function () {
                                    },
                                    onFail: function (err) {
                                    }
                                })
                            },
                            onFail: function (err) {
                            }
                        });
                    } catch (e) {
                    }
                })
            } else if (isWeiXin()) {

                $.post("/php/index.php", {url: location.href}, function (d) {
                    try {
                        var _d = JSON.parse(d);
                        wx.config({
                            debug: false,
                            appId: "wx1a816491ce9e6aa4",
                            timestamp: _d.timestamp,
                            nonceStr: _d.wxnonceStr,
                            signature: _d.wxSha1,
                            jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 功能列表，我们要使用JS-SDK的什么功能
                        });
                        wx.ready(function () {
                            // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
                            wx.onMenuShareTimeline({
                                title: shareValues.title, // 分享标题
                                link: shareValues.url,
                                imgUrl: shareValues.avtIcon // 分享图标
                            });
                            // 获取“分享给朋友”按钮点击状态及自定义分享内容接口
                            wx.onMenuShareAppMessage({
                                title: shareValues.title, // 分享标题
                                desc: shareValues.desc, // 分享描述
                                link: shareValues.url,
                                imgUrl: shareValues.avtIcon
                            });
                        });
                    } catch (e) {
                        console.log(e)
                    }
                })
            }
        }

        function isWeiXin() {
            var ua = navigator.userAgent;
            return /micromessenger/.test(ua.toLowerCase());
        }

        //check blacklist===
        function checkNamePass(vname,callback,err) {
            if (vname) {
//                $.post("/php/checkname.php", {vname: vname}, function (d) {
//
//                })
                $.ajax({
                    url:"/php/checkname.php",
                    type:"post",
                    data:{vname: vname},
                    timeout:5000
                }).done(function(d){
                    if(d.indexOf("pass")>-1){
                        callback&&callback();
                    }else{
                        err&&err()
                    }
                }).always(function(jqXHR, textStatus){
                    if (textStatus != "success") {
                        callback&&callback();
                    }
                })
            }
        }

        function funcName(v, n) {
            var s = v || ""
            var cc = s.slice(0, n).replace(/([^x00-xff])/g, "$1a").slice(0, n).replace(/([^x00-xff])a/g, "$1");
            return cc || s.substring(9);
        }

    });
</script>
</body>
</html>